.all {
    background-color: #f6f0e4;
}

.ment {
    padding-bottom: 2rem;

    .container {
        .title {

            .top {
                padding-top: 3%;
                color: #31364c;
                font-size: 2.875rem;
            }

            .under {
                width: 50%;
                padding-top: 2%;
                font-size: 1rem;
                color: #cdcfd7;
            }
        }

        .into {
            display: flex;
            justify-content: space-between;
            padding-top: 3%;

            .left {
                width: 60%;
                // background-color: red;

                .want {
                    width: 50%;
                    color: #cdcfd7;
                    // display: flex;
                    // justify-content: space-between;
                    border-bottom: 2px solid #cdcfd7;

                    // span {
                    //     color: #cdcfd7;
                    // }

                    .plan {
                        font-size: 1rem;
                        padding-bottom: 1rem;

                    }
                }

                .wantto {
                    display: flex;
                    justify-content: space-between;
                    padding-top: 2rem;

                    .box {
                        width: 70%;

                        .your {
                            color: #31364c;
                            font-size: 1rem;

                        }

                        .father {
                            margin-top: 1rem;
                            height: 1.2rem;
                            background-color: #ccc;
                            border-radius: 20rem;

                            .son3,
                            .son2,
                            .son {
                                width: 70%;
                                height: 1.2rem;
                                border-radius: 20rem;
                                background-color: #93c25e;
                            }

                            .son2 {
                                width: 50%;
                                background-color: #ccdb38;
                            }

                            .son3 {
                                width: 30%;
                                background-color: #fecc17;
                            }
                        }
                    }

                    .num2,
                    .num {
                        width: 20%;
                        color: #cdcfd7;
                        align-self: flex-end;
                        padding-bottom: .3rem;
                        margin-top: .2rem;
                        border-bottom: 1px solid #cdcfd7;
                    }

                    .num2 {
                        border-bottom: 0;
                    }

                    .inter {
                        .title {
                            color: #31364c;
                        }

                        .and {
                            padding-top: 2%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            #father {
                                width: 28%;
                                background-color: #ccc;
                            }

                            .father {
                                width: 35%;
                                height: 1.2rem;
                                background-color: #ea4c4c;
                                border-radius: 30rem;
                                // background-color: #ea4c4c;

                                .son {
                                    width: 1.8rem;
                                    height: 1.8rem;
                                    border-radius: 100%;
                                    box-shadow: .2rem .1rem .5rem #c3c3c3;
                                    cursor: pointer;
                                    margin-top: -.4rem;
                                    background-color: #ebebeb;
                                    transform: translateX(5rem);
                                }

                                input:checked+label .son {
                                    transform: translateX(0rem)
                                }
                            }


                            .txt {
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                padding-left: 1rem;
                                align-self: center;
                            }
                        }

                        .and2 {
                            padding-top: 5%;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;

                            #father {
                                width: 28%;
                                background-color: #ccc;
                            }

                            .father {
                                width: 35%;
                                height: 1.2rem;
                                background-color: #ea4c4c;
                                border-radius: 30rem;
                                // background-color: #ea4c4c;

                                .son {
                                    width: 1.8rem;
                                    height: 1.8rem;
                                    border-radius: 100%;
                                    box-shadow: .2rem .1rem .5rem #c3c3c3;
                                    cursor: pointer;
                                    margin-top: -.4rem;
                                    background-color: #ebebeb;
                                    transform: translateX(0rem);
                                }

                                input:checked+label .son {
                                    transform: translateX(5rem)
                                }
                            }


                            .txt2 {
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                padding-left: 1rem;
                                align-self: center;
                            }

                        }
                    }
                }

                .btns {
                    padding-top: 1.5rem;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .button {
                        width: 40%;

                        button {
                            border: 0;
                            color: #fff;
                            padding: 1rem 1.5rem;
                            border-radius: 30rem;
                            font-size: 1rem;
                            background-color: #252525;
                            transition: all .4s;

                            &:hover {
                                transform: translateY(-.5rem);
                                box-shadow: .1rem .2rem .5rem #31364c;
                            }
                        }
                    }

                    p {
                        width: 60%;
                        padding-left: 1.5rem;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }

            .right {
                .top {
                    margin-top: 1rem;
                    padding: 4rem 0;
                    background-color: #fafafa;
                    display: flex;
                    justify-content: space-between;

                    .left {
                        width: 45%;
                        text-align: center;


                        .in {
                            text-align: center;

                            p {
                                color: #31364c;
                                font-size: 1.2rem;
                            }

                            span {
                                color: #93c25e;
                                font-size: 1.2rem;
                            }
                        }

                        .pic2,
                        .pic {
                            margin: 0 auto;
                            margin-top: 2rem;
                            width: 50%;
                            background-color: #ccc;
                            border-top-left-radius: .5rem;
                            border-top-right-radius: .5rem;

                            .span {
                                display: inline-block;
                                width: 100%;
                                padding-top: 2rem;
                                border-top-left-radius: .5rem;
                                border-top-right-radius: .5rem;
                                background-color: #93c25e;
                            }

                            .bgc {
                                padding: 2rem 0;
                            }

                            .get {
                                width: 100%;
                                padding: 4rem 0;
                                background-color: #ccc;
                            }
                        }

                        .pic2 {
                            margin-top: 5rem;
                            padding-top: 3rem;
                        }

                        p {
                            color: #9699a6;
                            font-size: 1rem;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 2;
                        }

                        .money {
                            font-size: 2.5rem;
                            color: #93c25e;

                        }
                    }
                }

                .under {
                    width: 100%;
                    padding-top: 2rem;
                    background-color: #fafafa;
                    text-align: center;
                    padding-bottom: 2rem;

                    button {
                        width: 90%;
                        text-align: center;
                        border: 0;
                        color: #fff;
                        padding: 1rem 0;

                        border-radius: 30rem;
                        background-color: #252525;
                        transition: all .4s;

                        &:hover {
                            transform: translateY(-.5rem);
                            box-shadow: .1rem .2rem .5rem #31364c;
                        }
                    }
                }
            }


        }
    }



    @media screen and (max-width:549px) {
        .container {
            .into {
                .left {

                    .btns {
                        .button {
                            width: 50%;
                        }

                        p {
                            width: 50%;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:478px) {
        .container {
            .into {
                flex-wrap: wrap;

                .left {
                    width: 100%;
                }

                .right {
                    width: 100%;
                }
            }
        }
    }

    @media screen and (max-width:330px) {
        .container {
            .title {
                .top {
                    font-size: 2.3rem;
                }
            }
        }
    }

}